<template>
  <!-- 合同验签页面 -->
  <div class="contract-attestation layout-content">
    <c-upload
      type="button"
      @change="uploadAttestation"
      :buttonName="'点击上传（PDF文件）进行验签'"
      accept=".pdf"
    >
      <span slot="buttonIcon"
        ><c-icon slot="icon" type="shangchuan"></c-icon
      ></span>
    </c-upload>

    <div class="table-content">
      <table size="small" border class="myTable" v-if="tableVisible">
        <tr>
          <td class="column title">签约人</td>
          <td class="column text " v-for="(item, index) in cnArr" :key="index">
            {{ item }}
          </td>
        </tr>
        <tr>
          <td class="column title">签约时间</td>
          <td
            class="column text"
            v-for="(item, index) in singDateArr"
            :key="index"
          >
            {{ item }}
          </td>
        </tr>
        <tr>
          <td class="column title">颁发机构</td>
          <td
            class="column text "
            v-for="(item, index) in issuerCnArr"
            :key="index"
          >
            {{ item }}
          </td>
        </tr>
        <tr>
          <td class="column title">时间戳</td>
          <td
            class="column text "
            v-for="(item, index) in timestampArr"
            :key="index"
          >
            <span>是否使用时间戳：{{ item.isTimestamp }}</span>
            <span class="td-timestamp"
              >时间戳是否验证通过：{{ item.validata }}
            </span>
            <span>时间戳时间：{{ item.timestamp }}</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import cUpload from "@/components/upload";
import { esignVerifySignature } from "@/api/contract";

export default {
  components: { cUpload },
  data() {
    return {
      cnArr: [], //签约人
      singDateArr: [], //签约时间
      issuerCnArr: [], //颁发机构
      timestampArr: [], //时间戳
      tableVisible: false
    };
  },
  created() {},
  methods: {
    //上传合同
    uploadAttestation(file) {
      const formData = new FormData();
      formData.append("file", file);
      esignVerifySignature(formData)
        .then(res => {
          this.$message.success("上传成功");
          this.uploadSuccess(res);
        })
        .finally(() => {});
    },
    //上传成功
    uploadSuccess(res) {
      this.tableVisible = false;
      this.cnArr = [];
      this.singDateArr = [];
      this.issuerCnArr = [];
      this.timestampArr = [];
      res.forEach(item => {
        this.cnArr.push(item.cert.cn);
        this.issuerCnArr.push(item.cert.issuerCN);
        this.singDateArr.push(item.signature.signDate);
        this.timestampArr.push({
          isTimestamp: "是",
          timestamp: item.signature.signDate,
          validata: "是"
        });
        this.tableVisible = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-attestation {
  .iconfont {
    margin-right: 5px;
  }
  ::v-deep .ant-btn {
    font-size: 12px;
    width: 220px;
    color: #4d65fd;
    border-color: #cad1fe;
    background-color: #edf0ff;
  }

  .table-content {
    table {
      overflow-x: auto;
      margin-top: 20px;
      text-align: center;
      border-collapse: collapse;
      border: 1px solid #d3dce6;
      color: #606266;
      font-size: 14px;
    }
    background: #fff;
    min-height: 500px;
    td {
      background: #fff;
      text-align: left;
      padding: 15px;
      border: 1px solid #d3dce6;
    }
    .td-timestamp {
      display: block;
      margin: 5px 0;
    }
  }
}
</style>
